<template>
  <div class="preview-header">
      <button class="back-button" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
      </button>
      <div class="bar-title-container">
        <h2 style="font-size: 18px; margin: 10px 0; color: #077ef7">发布预习</h2>
          <span style="font-size: 14px">共{{ totalQuestions }}条</span>
      </div>
  </div>
</template>

<script>
import { ArrowLeft } from '@element-plus/icons-vue';

export default {
  components: {
    ArrowLeft,
  },
  props: {
    totalQuestions: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    goBack() {
      window.history.back();
    },
  },
};
</script>

<style scoped>
.preview-header {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    display: flex;
    align-items: center; /* 中心对齐 */
}

.back-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.bar-title-container {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}
</style>
